
/* 全局样式 */
* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}

html {
    font-size: 1.526vw;
    font-family: 'Microsoft YaHei';
}
.p-absolute-center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

/* 音乐播放器 */
.music {
    position: fixed;
    top: 3vh;
    right: 4vw;
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    border: 4px solid #ef1635;
    background-color: white;
    display: flex;
     /* 控制元素水平居中 */
    justify-content: center;
    /* 控制元素垂直居中 */
    align-items: center;
    z-index: 2;
}
.music > img:first-of-type {
    position: absolute;
    top: 24%;
    right: 2.5%;
    width: 28.426%;
    z-index: 1;
}
.music > img:last-of-type {
    width: 79%;
}
.music > img.play {
    animation: music_disc 4s linear infinite;
}
@keyframes music_disc {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* 第一个页面 */
.page {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: -1;
}
#page1 > .bg {
    background-image: url(./images/p1_bg.jpg);
}
#page1 > .p1-lantern {
    position: relative;
    top: -3.1vh;
    width: 45vw;
    height: 71.2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 让图片水平居中 */
    margin: 0 auto;
    background: url(./images/p1_lantern.png) no-repeat center bottom;
    background-size: 100%;
    /* 计算得来的值 */
    font-size: 3.506rem; 
}
#page1 > .p1-lantern::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 30vw;
    height: 30vw;
    background-color: #d60b3b;
    opacity: 0.5;
    box-shadow: 0 0 10vw 10vw #d60b3b;
    border-radius: 50%;
    z-index: -1;
    animation: p1_lantern 0.5s infinite alternate;
}
@keyframes p1_lantern {
    from {
        opacity: 0.5;
        transform: scale(0.8, 0.8);
    }
    to {
        opacity: 1;
    }
}
#page1 > .p1-logo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9vh;
    background: url(./images/p1_minxi.png) no-repeat center center;
    background-size: 100%;
    width: 50vw;
    height: 10vh;
    margin: auto;
  }
  #page1 > .p1-words {
    font-size: 2.134rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 48px;
    text-align: center;
  }
/* 第二个页面 */
#page2 {
    display: none;
    transition: all 0.5s;
}
#page2.fade-out {
    opacity: 0.3;
    transform: translateY(-100%);
}
#page2 > .bg {
    background-image: url(./images/p2_bg.jpg);
}

#page2 > .p2-year {
    background: url(./images/p2_2022.png) no-repeat center center;
    background-size: 100%;
    width: 35vw;
    height: 35vw;
}

#page2 > .p2-circle {
    background: url(./images/p2_circle_outer.png) no-repeat center center;
    background-size: 100%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    animation: p2_circle_outer 1s linear 3s infinite;
}
@keyframes p2_circle_outer{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
#page2 > .p2-circle::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: url(./images/p2_circle_middle.png) no-repeat center center;
    background-size: 100%;
    width: 46vw;
    height: 46vw;
    border-radius: 50%;
    animation: p2_circle_middle 1s linear 2s infinite;
}
#page2 > .p2-circle::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: url(./images/p2_circle_inner.png) no-repeat center center;
    background-size: 100%;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    animation: p2_circle_inner 1s linear 1s infinite;
}
@keyframes p2_circle_inner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-1080deg);
    }
}
@keyframes p2_circle_middle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(720deg);
    }
}
/* 第三个页面 */
#page3 {
    display: none;
    top: 100%;
    transition: all 0.5s;
}
#page3.fade-in {
    transform: translateY(-100%);
}
#page3 > .bg {
    background-image: url(./images/p3_bg.jpg);
}
#page3 > .p3-logo {
    width: 50vw;
    height: 6vh;
    position: absolute;
    top: 8vh;
    left: 0;
    right: 0;
    margin: auto;
    background: url(./images/p1_minxi.png) no-repeat center center;
    background-size: 100%;
  }
  #page3 > .p3-title {
    width: 48vw;
    height: 50vh;
    position: absolute;
    top: 21vh;
    left: 0;
    right: 0;
    margin: auto;
    background: url(./images/p3_title2.png) no-repeat center center;
    background-size: 100%;
  }
  #page3 > .p3-left {
    width: 23vw;
    height: 42vh;
    position: absolute;
    top: 25.5vh;
    left: 3.75vw;
    background: url(./images/p3_couplet_second.png) no-repeat center center;
    background-size: 100%;
  }
  #page3 .p3-right {
    width: 23vw;
    height: 42vh;
    position: absolute;
    top: 25.5vh;
    right: 3.75vw;
    background: url(./images/p3_couplet_first.png) no-repeat center center;
    background-size: 100%;
  }
  #page3 > .p3-fu {
    width: 35vw;
    height: 35vw;
    position: absolute;
    bottom: 5vh;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: url(./images/p3_blessing.png) no-repeat center center;
    background-size: 100%;
    border-radius: 50%;
    animation: p3_fu 1s linear infinite;
  }
  @keyframes p3_fu {
      from {
          transform: rotate(0deg);
      }
      to {
          transform: rotate(360deg);
      }
  }